<template>
  <div class="error" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
    <div class="title">
      <h1 id="t1">404~</h1>
      <h1 id="t2">404~</h1>
      <h1 id="t3">访问路径不存在</h1>
    </div>
    <el-empty description="走丢了吗？">
      <el-link type="primary" :underline="false" @click="$router.push('/record')">去首页</el-link>
    </el-empty>
  </div>
</template>

<script>
export default {
  name: "error"
}
</script>

<style scoped>
.error {
  position: absolute;
  width: 30%;
  left: 35%;
  top: 10%;
}

.title h1 {
  font-size: 100px;
}

#t1 {
  text-shadow: 3px 3px 6px lightgray;
  z-index: 1000;
}

#t2 {
  opacity: .4;
  transform: skewX(-60deg);
  filter: blur(3px);
  font-size: 100px;
  top: 2%;
  position: absolute;
  left: 40%;
}

#t3 {
  text-shadow: rgba(167, 154, 159, 0.7) 3px 3px 10px;
  font-size: 30px;
}
</style>
